<template>
	<div>
		<div class="detail" v-html="list" refs = "body">
		</div>
		<div class="footer1">
			<i class="goback" @click="goback"></i>
			<div class="shu"></div>
			<ul>
				<li>
					<img src="../assets/pinglun.png" alt="">
				</li>
				<li @click="likes">
					<img src="../assets/dianzan2.png" alt=""  class="img_likes" v-show="show_like">
					<img src="../assets/dainzan3.png" alt="" class="img_islikes" v-show="show_islike">
					<span>{{ like_num }}</span>
				</li>
				<li @click="collects">
					<img src="../assets/shoucang1.png" alt=""  class="img_collects" v-show="show_collects">
					<img src="../assets/shoucang2.png" alt="" class="img_iscollects" v-show="show_iscollects">
					<span>{{ collect_num }}</span>
				</li>
				<li>
					<img src="../assets/fenxiang.png" alt="">
				</li>
			</ul>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				css:'',
				pic:"",
				get_id:"",
				user:Object,
				like_num:0,
				islike_num:0,
				collect_num:0,
				iscollect_num:0,
				show_like:true,
				show_islike:false,
				show_collects:true,
				show_iscollects:false,
				flag:true
			}
		},
		created() {	
			// console.log(this.$route.query.id)
			this.get_id = this.$route.query.id
			// console.log(this.get_id)
			
			console.log(this.user)
			// console.log(localStorage.getItem("userinfo"))
		},
		mounted() {
			this.getlastlist()
			this.getlikes()
		},
		updated(){
			this.add_link()
			this.add_pic()
		},
		methods: {
			getlastlist: function() {
				this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/detail', {
						params: {
							id: this.$route.query.id
						}
					})
					.then((res) => {
						// console.log(res)
						this.list = res.data.body
						this.css = res.data.css
						// console.log(res.data.image)
						this.pic = res.data.image
						// console.log(res.data.title)
					})
			},
			add_link:function(){
					let link = document.createElement('link')
					link.rel = "stylesheet"
					link.href = this.css
					document.querySelector('.detail').insertBefore(link,this.$refs.body)
			},
			add_pic:function(){
				if(this.flag){
					let photo = document.createElement('img')
					photo.src = this.pic
					photo.className = "pho"
					photo.setAttribute('src',this.pic)
					photo.style.width = "100%"
					photo.style.height = "inherit"
					document.querySelector('.img-place-holder').append(photo)
					this.flag = !this.flag
				}
			},
			goback:function(){
				this.$router.push({
					path:'/'
				})
			},
			// 获取点赞收藏情况
			getlikes:function(){
				this.user = JSON.parse(localStorage.getItem("userinfo"))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/detailState',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.user.id,
					access_token:this.user.access_token
				}))
				.then((res)=>{
					console.log(res)
					// console.log(this.user.id,this.user.access_token)
					this.like_num = res.data.data.like
					this.islike_num = res.data.data.islike
					this.collect_num = res.data.data.collect
					this.iscollect_num = res.data.data.iscollect
					if(res.data.data.islike == 0){
						this.show_like = true
						this.show_islike = false
					}
					if(res.data.data.islike == 1){
						this.show_like = false
						this.show_islike = true
					}
					if(res.data.data.iscollect == 0){
						this.show_collects = true
						this.show_iscollects = false
					}
					if(res.data.data.iscollect == 1){
						this.show_collects = false
						this.show_iscollects = true
					}
				})
			},
			likes:function(){
				this.user = JSON.parse(localStorage.getItem("userinfo"))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/doAct',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.user.id,
					access_token:this.user.access_token,
					acttype:"like"
				}))
				.then(()=>{
					this.getlikes()
				})
			},
			collects:function(){
				this.user = JSON.parse(localStorage.getItem("userinfo"))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/doAct',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.user.id,
					access_token:this.user.access_token,
					acttype:"collect"
				}))
				.then(()=>{
					this.getlikes()
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.detail{
		margin-bottom: 30px;
	}
	.footer1{
		width: 100%;
		height: 40px;
		background: #ddd;
		position: fixed;
		bottom: 0%;
		left: 0;
		line-height: 40px;
		overflow: hidden;
		// position: relative;
		.goback{
			float: left;
			margin: 1vw;
			width: 30px;
			height: 30px;
			background: url(../assets/goback.png) no-repeat center center;
			background-size: cover;
		}
		.shu{
			margin-top: 1vw;
			float: left;
			width: 1px;
			height: 30px;
			margin-left: 2vw;
			background: #999;
		}
		ul{
			width: 80%;
			height: 30px;
			display: flex;
			justify-content: space-between;
			li{
				width: 50px;
				height: inherit;
				margin-top: 0px;
				position: relative;
				.img_islikes{
					position: absolute;
					top: 22%;
					left: 0%;
				}
				.img_iscollects{
					position: absolute;
					top: 22%;
					left: 0%;
				}
				img{
					width: 30px;
					height: inherit;
				}
			}
		}
		span{
			display: inline-block;
			position: absolute;
			top: -20%;
			left: 90%;
			font-size: 14px;
			color: #333;
			font-weight: 700;
		}
	}
</style>
